<template>
  <div class="data-card">
    <p class="title">{{ title }}</p>
    <div class="card-content">
      <div :class="[ 'counts', styleName ]">
        <template v-if="styleName == 'flex'">
          <div class="counts-item" v-for="(item, index) in counts" :key="index">
            <a-statistic :precision="precision || 0" :value="item.count" :valueStyle="valueStyle" />
            <span class="title">{{ item.title }}</span>
          </div>
        </template>
        <template v-else>
          <div class="counts-item">
            <a-statistic :precision="precision || 0" :value="counts.today" :valueStyle="valueStyle" />
            <span class="title">昨日全天：</span><span>{{ counts.yesterday }}</span>
          </div>
        </template>
      </div>
    </div>
    <div class="icon">
      <img :src="icon" alt="">
    </div>
  </div>
</template>

<script>
export default {
  name: 'dataCard',
  props: {
    title: { // 标题
      type: String,
      default: '',
    },
    styleName: { // 样式
      type: String,
      default: '',
    },
    counts: { // 集合
      type: [ Array, Object ],
      default: () => []
    },
    precision: { // 小数点
      type: Number,
      default: 0,
    },
    icon: { // 图标
      type: [ String, Boolean ],
      default: '',
    }
  },
  data() {
    return {
      valueStyle: {
        fontSize: '32px',
        lineHeight: '46px',
        height: '52px'
      }
    };
  },
  created() {},
  mounted() {},
  methods: {}
};
</script>

<style lang="less"></style>
